<template>
  <div>
     <div class="cart" :class="QRCODE == true ? 'current' : '' ">
     <!-- <div class="zzc" >
       
     </div> -->
     <!-- 导航 -->
     <nav-bar class="nav-bar">
       <div slot="center">购物车({{length}})</div>
     </nav-bar>
     <!-- 商品列表 -->
     <cart-list></cart-list>

     <!-- 底部汇总 -->  
     <cart-bottom-bar @qrCode="Settlement" />
    
     
   </div>
    <div class="qr-code" v-if="QRCODE" @click="Delete">
       <img src="@/assets/images/cart/er-code.jpg" alt="">
     </div>
  </div>
   
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue'
import CartList from './childComps/CartList.vue'
import CartBottomBar from './childComps/CartBottomBar.vue'

import { mapGetters } from 'vuex'


export default {
  name:'Cart',
  components: { NavBar,CartList,  CartBottomBar },
  data() {
    return {
      QRCODE:false
    }
  },
  
  
    computed:{  
    // cartLength(){
      //vuex的getters中拿到
    //   return this.$store.getters.cartLength
    // }
    //1.使用getters中的mapGetters方法
    // ...mapGetters(['cartLength'])
    // //2.可以传对象
     ...mapGetters({
       length:'cartLength'
     })

  },
  methods:{
    Settlement(){
      console.log(111);
      this.QRCODE = !this.QRCODE
      
    },
    Delete(){
      this.QRCODE = false
    }
  }

}
</script>

<style scoped>
.nav-bar{
  background-color: var(--color-tint);
 color: #fff;
 /* font-weight: 700; */

}
.cart{
  height: 100vh;  
}
.qr-code{
  position: fixed;
  top: 20%;
  left: 10%;
  width: 80%;
  z-index: 99999;

}
.qr-code img{
  width: 100%;
  height: 100%;
}
.current{
  opacity: .2;
}
</style>